<template>
  <div id="wrap" @mouseover="onMouseOver" @mouseout="onMouseOut">
    <ul>
      <li
        class="banner"
        v-for="(item, index) in items"
        :key="index"
        :class="{ active: index === active }"
      >
        <a herf="#" class="banner-img">
          <img :src="item" alt="" />
        </a>
      </li>
    </ul>
    <div class="tab">
      <span
        v-for="(item, index) in items.length"
        :key="index"
        @click="onToggle(index)"
        :class="{ active: index === active }"
      >
      </span>
    </div>
    <div class="prev iconfont icon-zuojiantou" @click="onPrev"></div>
    <div class="next iconfont icon-youjiantou_huaban" @click="onNext"></div>
  </div>
</template>

<script>
import swiper1 from "@/assets/img/picture/swiper1.jpg";
import swiper2 from "@/assets/img/picture/swiper2.jpg";
import swiper3 from "@/assets/img/picture/swiper3.jpeg";
import swiper4 from "@/assets/img/picture/swiper4.jpg";
import swiper5 from "@/assets/img/picture/swiper5.jpg";

export default {
  name: "SwipeBanner",
  props: {
    items: {
      type: Array,
      default: () => {
        return [swiper1, swiper2, swiper3, swiper4, swiper5];
      },
    },
  },
  data() {
    return {
      active: 0,
      interval: null,
    };
  },
  created() {
    this.timer();
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
  methods: {
    timer() {
      this.interval = setInterval(() => {
        this.active = this.active + 1;
        if (this.active >= this.items.length) {
          this.active = 0;
        }
      }, 3000);
    },
    onMouseOver() {
      clearInterval(this.interval);
    },
    onMouseOut() {
      this.timer();
    },
    onToggle(index) {
      this.active = index;
    },
    onPrev() {
      if (this.active <= 0) {
        this.active = this.items.length - 1;
        return;
      }
      this.active -= 1;
    },
    onNext() {
      if (this.active >= this.items.length - 1) {
        this.active = 0;
        return;
      }
      this.active += 1;
    },
  },
};
</script>

<style lang='less'>
#wrap {
  position: relative;
  margin: 20px auto;
  width: 1226px;
  height: 460px;
  .banner {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 2s;
    &.active {
      opacity: 1;
    }
    a img {
      width: 1226px;
    }
  }
  .tab {
    position: absolute;
    bottom: 10px;
    right: 10px;
    span {
      display: inline-block;
      width: 6px;
      height: 6px;
      margin: 3px;
      background: rgba(105, 105, 105, 0.5);
      border-radius: 50%;
      cursor: pointer;
      border: 2px solid #887b6e;
      &.active {
        background: #e2ceb7;
      }
      &:hover {
        background: #e2ceb7;
      }
    }
  }
  .prev {
    position: absolute;
    left: 234px;
    top: 210px;
    width: 41px;
    height: 69px;
    font-size: 45px;
    color: #d49fa0;
    background: transparent;
    cursor: pointer;
    &:hover {
      background: #6e6e6e;
    }
  }
  .next {
    position: absolute;
    right: 0px;
    top: 210px;
    width: 41px;
    height: 69px;
    font-size: 45px;
    color: #d49fa0;
    background: transparent;
    cursor: pointer;
    &:hover {
      background: #6e6e6e;
    }
  }
}
</style>
